﻿@import "Default/Theme";
@import "Default/_soIcons";
@font-face {
  font-family: 'SoIcons';
  src: url('/LiberUI/Style/Default/fonts/iconfont.eot');
  src: url('/LiberUI/Style/Default/fonts/iconfont.eot') format('embedded-opentype'), url('/LiberUI/Style/Default/fonts/iconfont.woff') format('woff'), url('/LiberUI/Style/Default/fonts/iconfont.ttf') format('truetype'), url('/LiberUI/Style/Default/fonts/iconfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}
.disable{

}
.error{
}
.focus{
    overflow:visible;
}
.MaskLayer{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:999999;
}
/*#region 按钮*/
.button{
    @include btnStyle();
    height: 3rem;  //针对IE浏览器加\0,chrome只需要line-height即可
    line-height:3rem;
    &.btn-focus{
        @include btnStyle($ClrFocus,$ClrFocusTxt);
        &>i{
            @include soicon($ClrFocusTxt);
        }
    }
    &.btn-focus-light{
        @include btnStyle(white,$ClrFocus);
        border:1px solid $ClrFocus;
        box-shadow:none !important;
    }
    &.btn-unusual{
        @include btnStyle(rgba(0,0,0,0),$ClrTheme);
    }
    &.btn-risky{
        @include btnStyle($ClrImportant,$ClrFocusTxt);
        &>i{
            @include soicon($ClrFocusTxt);
        }
        &.btn-lite{
            background-color:transparent;
            color:$ClrImportant;
            border:1px solid $ClrImportant;
            box-shadow:none;
            text-decoration:dashed;
            &:hover{
                text-shadow:none;
                box-shadow: 1px 1px 4px lighten($ClrImportant,10);
            }
        }
    }
    &.btn-lite{
        background-color:transparent;
        color:$ClrTheme;
        border:1px solid $ClrTheme;
        box-shadow:none;
        text-decoration:dashed;
        &:hover{
            text-shadow:none;
            box-shadow: 1px 1px 4px #4A4A4A;
        }
    }
    &.disabled{
        background-color:$ClrDisableBk !important;
        color:$ClrDisable !important;
        cursor:not-allowed !important;
        &:hover{
            background-color:$ClrDisableBk !important;
            color:$ClrDisable !important;
            text-shadow:none;
        }
        &:active{
            background-color:$ClrDisableBk !important;
            color:$ClrDisable !important;
            text-shadow:none;
        }
    }
}
.btn-big {
    font-weight: bold;
    width: 100%;
}
/*#endregion*/

/*#region 复选框CheckBox */
.checkbox{
    height:1.5rem;
    line-height:1.5rem;
    background-image: url('Default/Imgs/Controll.png');
    background-repeat:no-repeat;
    background-size:1.5rem auto;
    padding-left:1.6rem;
    cursor:pointer;
    &.unchecked{
        background-position-y:-1.7rem;
    }
}
/*#endregion*/

/*#region 对话框 */
@-moz-keyframes overturn{
    0%{

    }
    100%{

    }
}
@-webkit-keyframes overturn{
    0%{

    }
    100%{

    }
}
@keyframes overturn{
    0% {
        -moz-transform: scale(0.5);
        -o-transform: scale(0.5);
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }
    100% {
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
.DialogMask{
    background-color:rgba(128, 128, 128, 0.5);
}
.Dialoger {
    min-width: 35rem;
    max-width:1000px;
    min-height: 20rem;
    margin: 0 auto;
    background-color: white;
    -webkit-box-shadow: 4px 6px 25px 0 rgba(0,0,0,0.75);
    -moz-box-shadow: 4px 6px 25px 0 rgba(0,0,0,0.75);
    box-shadow: 4px 6px 25px 0 rgba(0,0,0,0.75);
    position:relative;
    & > .dlg_head {
        height: 3rem;
        line-height:3rem;
        padding:0 0 0 5px;
        border-bottom:1px solid lighten($ClrThemeTxt,30);
        &>h4{
            height:3rem;
            line-height:3rem;
        }
        &>.dlg_closer{
            position:absolute;
            right:0.5rem;
            top:0;
            @include soicon($ClrThemeTxt);
            @extend .icon-clear;
            //line-height:3rem; //由于父级定义了line-height，需要重新定义来修正
            cursor:pointer;
            &:hover{
                @include soicon($ClrTheme);
                //line-height:3rem;
            }
        }
    }

    & > .dlg_body {
        //max-height:22rem;
        //width:100%;
        padding:1rem 1rem 4rem 1rem;
        overflow-y:auto;
    }

    &>.dlg_bottom {
        height: 4rem;
        width:100%;
        line-height:4rem;
        text-align:right;
        position:absolute;
        bottom:0;
        left:0;
        &>.dlg_btn{
            line-height:2.5rem;
            font-size:1.3rem;
            margin-right:2rem;
            display:inline-block;
            cursor:pointer; 
            &.btnEnter{
                @include btnStyle();
                color:$ClrThemeHotTxt;
                &>i{
                    @include soicon($ClrThemeHotTxt);
                }
            }         
            &>i{
                @include soicon($ClrThemeTxt);
            }
        }
   }

   &.Normal{

   }
   &.Small{
         width:500px !important;

   }
   &.LightWeight{
        width:412px;
        font-size:1.2rem;
   }
}

@media (max-width: $bigphone){
    .Dialoger {
        min-width: 80%;
        max-width:80%;
        min-height: 15rem;
        margin: 0 auto;
        background-color: white;
        -webkit-box-shadow: 4px 6px 25px 0 rgba(0,0,0,0.75);
        -moz-box-shadow: 4px 6px 25px 0 rgba(0,0,0,0.75);
        box-shadow: 4px 6px 25px 0 rgba(0,0,0,0.75);
        position:relative;
    }
}

/*#endregion*/

/*#region 下拉选择 */
.dropdown {
    text-align: center;
    position: relative;
    padding: 0 20px;
    display: inline-block;
    cursor:pointer;
    &:hover{
        background-color: white;
        color:$ClrTheme;
        box-shadow:1px 1px 3px 1px #808080;
        &:after {
        }
    }
    &.active{
        background-color: white;
        color:$ClrTheme;
        box-shadow:1px 1px 3px 1px #808080;
        &:after {
        }    
    }

    &:after {
        content: '';
        display: block;
        height: 0;
        width: 0;
        border: 5px solid #000;
        border-left-color: rgba(0,0,0,0);
        border-bottom-color: rgba(0,0,0,0);
        position: absolute;
        right: 0;
        bottom: 0;
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
}

/*#endregion*/

/*#region 表格*/
.gridtable{
    border:1px solid $ClrThemeTxt;
    &>.grid-body{
        background-color:white;
        &>.grid-row{
        }
    }
}
.grid-row{
    position:relative;
    display:block;
    width:100%;
    min-height:2rem;
    border-bottom:1px solid lighten($ClrThemeTxt,20);
    background-color:lighten($PageBk,10);
    overflow:hidden;
    &.headrow{
        height:2.2rem;
        line-height:2.2rem;
        min-height:2.2rem !important;
        background-color:$ClrDisableBk;
        border-bottom:1px solid lighten($ClrThemeTxt,30);
        font-size:1.4rem;
    }
    &:after{
        content: '';
        display: block;
        clear: left;
    }
    &>.grid-col{
        position:absolute;
        //position:relative;
        //float:left;
        display:block;
        height:100%;
        //padding:1px;
        //float:left;
        text-align:center;
        //left:0 !important;
        border:none;
        border-left:1px solid gray !important;
        background-color:transparent;
        &:focus{
            z-index:9;
            box-shadow: 0 0 9px $ClrTheme inset !important;
        }
        /*&:before{
            position:absolute;
            left:0;
            content:'';
            display:block;
            width:1px;
            border-left:1px solid gray;
            height:10000px;
        }*/
        &.start{
            float:left;
            border:none !important;
            position:relative; //现代样式下才能把整个行撑高
        }
        &.end{
            
        }
    }
}

/*#endregion*/

/*#region 轻量级提示框*/
.prompt_active {
    -moz-animation: fladeInDown 0.5s normal;
    -o-animation: fladeInDown 0.5s normal;
    -webkit-animation: fladeInDown 0.5s normal;
    animation: fladeInDown 0.5s normal;
}
.prompt_dispose {
    -moz-animation: fladeOutUp 0.5s forwards;
    -o-animation: fladeOutUp 0.5s forwards;
    -webkit-animation: fladeOutUp 0.5s forwards;
    animation: fladeOutUp 0.5s forwards;
}
/*#endregion*/

/*#region 列表*/
.ListItem{
    &>.li-body{
       cursor:pointer;
       position:relative;
       &>.li-line{
           position:absolute;
           top:0;
           left:0;
           height:2rem;
           line-height:2rem;
           background-image: url('Default/Imgs/List-treeline.png');
           background-repeat:no-repeat;
        }
       &>.li-prefix{
           position:absolute;
           top:0;
           left:0;
           line-height:2rem;
           &.treeSpaner{
                width:2rem;
                height:2rem;
           }
       }
       &>.li-content{
           display:block;
       }
       &:hover{
           background-color:lighten($ClrTheme,40);
       }
       &.slcted{
           background-color:lighten($ClrTheme,20);
       }
   }
    &>.li-children{
    }
}

/*#endregion*/

/*#region 分页*/
.LiberUI-Paging{
    height:35px;
    line-height:25px;
    padding:5px 0 5px 2rem;
    & .button{
        height:25px;
        line-height: 25px;
        font-size: 1rem;
        box-sizing: content-box;       
   }
}
.paging-operate{
   &>.toPage{
        width: 3rem !important;
        height: 25px;
        line-height:25px;
        box-sizing:content-box;
   }
    &>span{
        margin-left:0.5rem;
        margin-right:0.5rem;
    }
}
.pagination{
    display:inline-block;
    &>.button{
        margin-left:0.5rem;
        margin-right:0.5rem;      
   }
   
}


/*#endregion*/

/*#region 表格v2*/
.liberui-grid-table{
    width:100%;
    display:table;
    border:1px solid $ClrThemeTxt;
    vertical-align:middle;
    overflow:hidden;
    position:relative;
    & .gridRow{
        display:table-row;
        width:100%;
        position:relative;
        &>.gridCol{
            display:table-cell;
            border:none;
            border-bottom:1px solid gray;
            position:relative;
            padding:5px;
            text-align:center;
            vertical-align:middle;
            &:before{
                content:'';
                position:absolute;
                left:0;
                top:0;
                width:0;
                border-left:1px solid lighten($ClrThemeTxt,10);
                height:1000px;
            }
        }
    }
    &>.head{
        height:2rem;
        line-height:2.2rem;
        font-weight:bold;
        &>.gridCol{
            padding:0;
        }
    }
    &>.gridBody{
        display:table-row-group;
        background-color:white;
        &.fixHeight{
            overflow-y:scroll;
        }
    }
}
/*#endregion*/

/* 16/8/1 controls */
.contorl-checkbox{
    cursor: pointer;

    input{
        display: none;
    }
    span{
        padding-left: 25px;
        position: relative;
        display:inline-block;

        &:before{
            content:'';
            width: 20px;
            height: 20px;
            margin-top: -10px;
            background: url(/LiberUI/Style/Default/Imgs/Controll.png) left top / 20px auto no-repeat;
            background-position: 0 -352px;
            position: absolute;
            left: 0;
            top: 50%;
        }
    }
    input:checked + span:before{
        background-position: 0 -378px;
    }
}

/* 选项卡 */

.tab-panel{
    .tab-panel-header{
        text-align: center;
        position: relative;

        &:before{
            content:'';
            width: 100%;
            height: 1px;
            background:#3caed4;
            position: absolute;
            left:0;
            bottom: 0;
        }
        .item{
            border: 1px solid transparent;
            padding: 1rem 0;
            cursor:pointer;
        }
        .title{
            color: #666;
            font-size: 1.4rem;
            display: block;
        }
        .text{
            color: #999;
            font-size: 1rem;
        }
        .active{
            border-color: #3CADE4;
            border-bottom-color: #F0F0F0;
            cursor: default;

            .title{
                font-weight: bold;
            }

            .title,
            .text{
                color: #4AA6BC;
            }
        }
    }
    .tab-panel-body{
        padding-top: 2rem;

        .item{
            position: relative;
            display: none;
            &:after{
                content:'';
                clear:both;
                display:block;
            }
        }
        .active{
            display: block;
        }
    }
}
.table-header{
    font-size: 1.2rem;
    padding: 5px;
    border: 1px solid gray;
    border-left-width: 2px;
    border-bottom: 0;
    
    a{
        border: 0;
        float: right;
    }
}